<template>
    <div>
        <pdf ref="myPdfComponent" hidden :src="this.url"></pdf>
        <!--    第一种 pdf展示-->
        <!--    <div style="height: 800px;overflow-y: auto;text-align: center;background-color: #525659;">-->
        <!--      <pdf-->
        <!--        v-for="i in numPages"-->
        <!--        :key="i"-->
        <!--        :src="src"-->
        <!--        :page="i"-->
        <!--        style="display: inline-block;width: 800px;text-align: center;margin-top: 10px;"-->
        <!--      ></pdf>-->
        <!--    </div>-->
        <!--    第二种 iframe展示-->
        <iframe :src="url" frameborder="0" style="width: 100%; height: 700px;"></iframe>
        <div style="text-align: center;">
            <a-button type="primary" style="width: 120px;" icon="printer" @click="$refs.myPdfComponent.print()">打印</a-button>
        </div>
    </div>
</template>

<script>
    import pdf from 'vue-pdf'
    export default {
        components: {
            pdf
        },
        data () {
            return {
                // src: pdf.createLoadingTask(this.url),
                // numPages: undefined
            }
        },
        props: ['url'],
        mounted () {
            // this.src.promise.then(pdf => {
            //   this.numPages = pdf.numPages
            // })
        }
    }
</script>
